<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片插入</title>
</head>
<body>
<!--
    1.图片标签: 相对路径
      相对于当前路径定位资源
      src属性: 资源路径
      alt属性: 图片未加载时显示的内容
      title属性: 鼠标悬停在图片上会显示的内容
      1.1 同级目录: 直接写文件名
      1.2 下一级目录: img/1.jpg
      1.3 上一级目录: ../3.png
      1.4 上n级目录: ../../../X.png - 以此类推
-->
<img src="2.png" alt="草泥马的图片未加载">
<img src="img/zly.jpg" alt="草泥马的图片未加载">
<img src="../3.png" alt="草泥马的图片未加载" title="高清图片">
<!--
    2.图片标签: 绝对路径
    引用第三方网站图片:
    浏览器中右键图片 -> 选择'检查' -> 找到被高亮显示的地址(鼠标悬停在该地址上会显示图片缩略图) -> 双击该地址 -> 右键复制 -> 进行后续操作
-->
<img src="https://cdn.tmooc.cn/bsfile//imgad///5706defebbff4fdfb0a19b70d6bef77b.png" alt="草泥马的图片未加载">
<!--
    3.图片标签: 设计图片的高度和宽度(以像素px为单位)
-->
<img src="img/zly.jpg" height="96.6px" width="69px" alt="草泥马的图片未加载" title="赵丽颖(小)">
</body>
</html>